<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>primary</view>
				<view>主题色，影响tab、钟盘数字、钟盘原点、上下午按钮、提交按钮</view>
			</view>
			<view class="tr">
				<view>color</view>
				<view>String</view>
				<view>无</view>
				<view>自定义主题色，影响tab、钟盘数字、钟盘原点、上下午按钮、提交按钮</view>
			</view>
			<view class="tr">
				<view>textColor</view>
				<view>String</view>
				<view>无</view>
				<view>文字固定色，影响tab、钟盘数字、上下午按钮、提交按钮</view>
			</view>
			<view class="tr">
				<view>plain</view>
				<view>Boolean</view>
				<view>false</view>
				<view>镂空，影响tab、钟盘数字</view>
			</view>
			<view class="tr">
				<view>radius</view>
				<view>String</view>
				<view>30vw</view>
				<view>钟盘半径，显示钟盘尺寸为该数值两倍，加上2em的钟盘数字外溢占位</view>
			</view>
			<view class="tr">
				<view>tabRadius</view>
				<view>String, Number</view>
				<view>circle</view>
				<view>tab圆角，可选circle、square，或带单位数值</view>
			</view>
			<view class="tr">
				<view>tabbarWidth</view>
				<view>String</view>
				<view>60vw</view>
				<view>tab栏宽度，需带单位。满宽可填100%，未满宽自动水平居中</view>
			</view>
			<view class="tr">
				<view>tabHeight</view>
				<view>String</view>
				<view>2em</view>
				<view>tab栏宽度，需带单位</view>
			</view>
			<view class="tr">
				<view>useHour</view>
				<view>Boolean</view>
				<view>true</view>
				<view>使用时钟-时功能</view>
			</view>
			<view class="tr">
				<view>useMinute</view>
				<view>Boolean</view>
				<view>true</view>
				<view>使用时钟-分功能</view>
			</view>
			<view class="tr">
				<view>useSecond</view>
				<view>Boolean</view>
				<view>true</view>
				<view>使用时钟-秒功能</view>
			</view>
			<view class="tr">
				<view>value</view>
				<view>String</view>
				<view>无</view>
				<view>初始时间值，格式XX:XX:XX，连接符除下划线外可用任意特殊字符。如果有部分功能关闭，则按顺序代换</view>
			</view>
			<view class="tr">
				<view>resFormat</view>
				<view>String</view>
				<view>timestamp</view>
				<view>返回格式，传入value为有效日期值时，返回结果也为日期值。可选timestamp、ISO，UTC，和自定义格式串</view>
			</view>
			<view class="tr">
				<view>toolbarTop</view>
				<view>Boolean</view>
				<view>false</view>
				<view>工具栏置于顶部</view>
			</view>
			<view class="tr">
				<view>toolWidth</view>
				<view>String</view>
				<view>calc(20vw - 1em)</view>
				<view>工具栏单个工具宽度</view>
			</view>
			<view class="tr">
				<view>toolStraight</view>
				<view>Boolean</view>
				<view>false</view>
				<view>工具按钮横向化</view>
			</view>
			<view class="tr">
				<view>useScrollBox</view>
				<view>Boolean</view>
				<view>false</view>
				<view>工具栏使用滚动盒，滚动可调整时间。<text class="color-error">注意存在兼容问题。嵌入弹窗时，弹窗打开动画如有scale变换，将导致滚动盒大小、滚动位置计算错误，最终时间取值错误，并产生连带错误。这时可开启手动初始化滚动盒，在弹窗动画结束后调用初始化，或者关闭弹窗的scale变换</text></view>
			</view>
			<view class="tr">
				<view>selfInitScrollBox</view>
				<view>Boolean</view>
				<view>false</view>
				<view>滚动盒手动初始化。开启后，手动调用initScroll进行初始化</view>
			</view>
			<view class="tr">
				<view>pointerSet</view>
				<view>Object</view>
				<view></view>
				<view>时钟指针设置，详细见下方</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>text</view>
					<view>Object</view>
					<view></view>
					<view>内部文字数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"文字"}
					<view>tabHour：时　tab栏小时按钮</view>
					<view>tabMinute：分　tab栏分钟按钮</view>
					<view>tabSecond：秒　tab栏秒钟按钮</view>
					<view>unitHour：时　工具栏小时单位</view>
					<view>unitMinute：分　工具栏分钟单位</view>
					<view>unitSecond：秒　工具栏秒钟单位</view>
					<view>AM：上午　钟盘上下午按钮</view>
					<view>PM：下午　钟盘上下午按钮</view>
					<view>submit：确定　提交按钮</view>
				</view>
			</view>
			<view class="tr">
				<view>@submit</view>
				<view>事件</view>
				<view></view>
				<view>返回结果，提交按钮触发。如果value为日期值，则根据resFormat返回对应格式，否则根据开启的时钟功能返回对应字符串。在仅关闭分功能的情况，强制返回时分秒的结果</view>
			</view>
			<view class="tr">
				<view>@change</view>
				<view>事件</view>
				<view></view>
				<view>值变更事件，返回结果：{hour:时, minute:分, second:秒}</view>
			</view>
			<view class="tr">
				<view>getData</view>
				<view>function</view>
				<view></view>
				<view>手动获取结果，与submit相同。可传入resFormat参数取代props参数</view>
			</view>
			
		</view>
		
		<view class="p-sm">
			<vi-collapse title="指针设置 pointerSet" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>hourShift</view>
						<view>String</view>
						<view>时针相对原点偏移值。默认值：15%</view>
					</view>
					<view class="tr">
						<view>hourType</view>
						<view>String</view>
						<view>时针主题色。默认值：primary</view>
					</view>
					<view class="tr">
						<view>hourColor</view>
						<view>String</view>
						<view>时针自定义主题色。默认值：无</view>
					</view>
					<view class="tr">
						<view>hourWidth</view>
						<view>String</view>
						<view>时针长，默认值：40%</view>
					</view>
					<view class="tr">
						<view>hourHeight</view>
						<view>String</view>
						<view>时针宽。默认值：0.3em</view>
					</view>
					<view class="tr">
						<view>minuteShift</view>
						<view>String</view>
						<view>分针相对原点偏移值。默认值：15%</view>
					</view>
					<view class="tr">
						<view>minuteType</view>
						<view>String</view>
						<view>分针主题色。默认值：primary</view>
					</view>
					<view class="tr">
						<view>minuteColor</view>
						<view>String</view>
						<view>分针自定义主题色。默认值：无</view>
					</view>
					<view class="tr">
						<view>minuteWidth</view>
						<view>String</view>
						<view>分针长，默认值：65%</view>
					</view>
					<view class="tr">
						<view>minuteHeight</view>
						<view>String</view>
						<view>分针宽。默认值：0.15em</view>
					</view>
					<view class="tr">
						<view>secondShift</view>
						<view>String</view>
						<view>秒针从外边相对原点偏移值。默认值：-0.25em</view>
					</view>
					<view class="tr">
						<view>secondType</view>
						<view>String</view>
						<view>秒针主题色。默认值：error</view>
					</view>
					<view class="tr">
						<view>secondColor</view>
						<view>String</view>
						<view>秒针自定义主题色。默认值：无</view>
					</view>
					<view class="tr">
						<view>secondWidth</view>
						<view>String</view>
						<view>秒针长，默认值：0.3em</view>
					</view>
					<view class="tr">
						<view>secondHeight</view>
						<view>String</view>
						<view>秒针宽，默认值：0.7em</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{`&lt;vi-clock :value="value">&lt;/vi-clock>`}}
			</view>
			<view class="py-sm">
				<vi-clock :value="value" @submit="submit" useScrollBox></vi-clock>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: "6:18:00"
			}
		},
		methods: {
			submit(str, obj){
				console.log("结果", str, obj);
			}
		}
	}
</script>

<style lang="scss" scoped>
.pageContainer{
	
}
</style>
